<template>
    <div>
        <div class="topImg" data-aos="fade" data-aos-duration="1000">
            <img :src="image" alt="">
            <span>联系我们</span>
        </div>
        <div class="page_content">
            <div class="way">
                <div class="info" v-for="(item, index) in list" :key="item.id">
                    <div class="title">
                        {{ item.title }}
                    </div>
                    <div class="num"><span>TEL：</span>{{ item.phone }} </div>
                    <div class="num" v-if="item.email"><span>Email：</span>{{ item.email }}</div>
                    <div class="line" v-if="index % 3 == 0">
                        <el-divider></el-divider>
                    </div>
                </div>
            </div>
            <div class="map">
                <div class="title">富贵泉总部 <span>四川省广汉市汉州街道汉州工业园区</span></div>
                <!-- 百度地图容器 -->
                <div id="baidu-map-container" style="width: 100%; height: 500px;"></div>
            </div>
        </div>
    </div>
</template>

<script>
/* global BMap, BMAP_NORMAL_MAP, BMAP_HYBRID_MAP */
export default {
    data() {
        return {
            list: [],
            image: '',
            map: null, // 存储地图实例
            marker: null // 存储标记点实例
        }
    },
    mounted() {
        this.getList()
        this.getImage()
        this.loadBaiduMap()
    },
    methods: {


        
        getImage() {
            this.$api.getBanner({
                slide_id: 5,
                limit: 1
            }).then(res => {
                if (res.code == 1) {
                    this.image = res.data.image
                }
            })
        },
        getList() {
            this.$api.contactUs().then(res => {
                if (res.code == 1) {
                    this.list = res.data
                }
            })
        },
        loadBaiduMap() {
            // 检查是否已加载百度地图API
            if (window.BMap) {
                this.initBaiduMap()
                return
            }

            // 动态加载百度地图API
            const script = document.createElement('script')
            script.src = `https://api.map.baidu.com/api?v=3.0&ak=O2BLpZCNX2CsCCwXw7iO3Fwc3ZpZplxq&callback=baiduMapInit`
            document.head.appendChild(script)

            // 定义回调函数
            window.baiduMapInit = () => {
                this.initBaiduMap()
            }
        },
        initBaiduMap() {
            // 创建地图实例
            this.map = new BMap.Map('baidu-map-container')
            
            // 设置中心点坐标
            const point = new BMap.Point(104.24922612878852, 30.938410122809753)
            this.map.centerAndZoom(point, 19)
            
            // 添加地图控件
            this.map.addControl(new BMap.NavigationControl())
            this.map.addControl(new BMap.ScaleControl())
            
            
            // 添加标记点
            this.marker = new BMap.Marker(point)
            this.map.addOverlay(this.marker)
            
            // 添加信息窗口
            const infoWindow = new BMap.InfoWindow(`
                <div style="padding: 10px;">
                    <h4 style="margin: 0 0 5px 0;">富贵泉总部</h4>
                    <p style="margin: 0;">四川省广汉市汉州街道汉州工业园区</p>
                </div>
            `)
            
            this.marker.addEventListener('click', () => {
                this.marker.openInfoWindow(infoWindow)
            })
            
            // 启用滚轮缩放
            this.map.enableScrollWheelZoom()
            
            // 添加地图类型控件
            this.map.addControl(new BMap.MapTypeControl({
                mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
            }))
            
            // 启动缓慢跳动动画
            this.startGentleMarkerAnimation()
        },
        startGentleMarkerAnimation() {
            let jumpHeight = 0
            const maxJumpHeight = 15 // 减小跳动高度
            const animationSpeed = 0.01 // 减慢动画速度
            // let direction = 1
            
            // 保存原始位置
            const originalPoint = this.marker.getPosition()
            
            const animate = () => {
                if (this.marker) {
                    // 使用正弦函数实现平滑上下运动
                    jumpHeight = Math.sin(Date.now() * animationSpeed) * maxJumpHeight
                    
                    // 设置新的位置
                    const newPoint = new BMap.Point(
                        originalPoint.lng,
                        originalPoint.lat - jumpHeight / 100000
                    )
                    this.marker.setPosition(newPoint)
                }
                
                requestAnimationFrame(animate)
            }
            
            animate()
        }
    }
}
</script>

<style lang="scss" scoped>
.topImg {
    position: relative;

    img {
        width: 100%;
        height: auto;
    }

    span {
        position: absolute;
        bottom: 270px;
        left: 170px;
        font-weight: bold;
        font-size: 85px;
        color: #FFFFFF;
        font-family: MiSans;
    }
}

.page_content {
    margin-top: 80px;
    width: 100%;
    padding: 0 154px 0 174px;

    .way {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 300px;
        position: relative;

        .info {
            width: 310px;
            padding: 90px 0 120px;

            .line {
                position: absolute;
                width: 100%;
                margin: 90px 0;
            }

            .title {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #0D0D0D;
                margin-bottom: 33px;
            }

            .num {
                font-family: Microsoft YaHei;
                font-weight: 300;
                font-size: 16px;
                color: #4D4D4D;
                margin-bottom: 22px;
white-space: nowrap;
                &:last-child {
                    margin: 0;
                }
                >span{
                    display: inline-block;
                    width: 50px;
                }
            }
        }
    }

    .map {
        padding-bottom: 130px;
        width: 100%;

        .title {
            padding: 134px 0 73px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 36px;
            color: #070000;
            span{
                margin-left: 10px;
                font-size: 26px;
            }
        }

        /* 移除原来的img样式 */
        #baidu-map-container {
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}
@media screen and (max-width:768px) {
    .page_content .way .info{
        width: 100%;
        border-bottom: 1px solid #ccc;
        .title{
        font-size: 16px;
    }
    .num{
        font-size: 14px;
    }
    .line{
        display: none;
    }
    }
    .page_content .map .title{
        font-size: 18px;
        span{
            font-size: 14px;
        }
    }
}
</style>